<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">

            <el-form-item label="下拉默认值的类型">
                <el-select v-model="propJson.splitButton">
                    <el-option label="文本" value="span" />
                    <el-option label="按钮" value="button" />
                    <el-option label="头像" value="avatar" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否透明背景" v-if="propJson.splitButton === 'button'">
                <el-radio-group v-model="propJson.isPlain">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="自定义颜色" v-if="propJson.splitButton === 'button'">
                <el-radio-group v-model="propJson.isCustomColor">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="按钮颜色" v-if="propJson.splitButton === 'button' && propJson.isCustomColor">
                <el-color-picker v-model="propJson.customColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="头像Size大小" v-if="propJson.splitButton === 'avatar'">
                <el-select v-model="propJson.avatarSize">
                    <el-option label="大号" value="large" />
                    <el-option label="默认" value="default" />
                    <el-option label="小号" value="small" />
                </el-select>
            </el-form-item>

            <el-form-item label="头像URL地址" v-if="propJson.splitButton === 'avatar'">
                <el-input v-model="propJson.avatarUrl" />
            </el-form-item>

            <el-form-item label="头像形状" v-if="propJson.splitButton === 'avatar'">
                <el-select v-model="propJson.avatarShape">
                    <el-option label="圆形" value="circle" />
                    <el-option label="方形" value="square" />
                </el-select>
            </el-form-item>

            <el-form-item label="头像填充类型" v-if="propJson.splitButton === 'avatar'">
                <el-select v-model="propJson.avatarFit">
                    <el-option label="自动填充" value="fill" />
                    <el-option label="自适应" value="contain" />
                    <el-option label="自放大" value="cover" />
                    <el-option label="自缩小" value="scale-down" />
                    <el-option label="无操作" value="none" />
                </el-select>
            </el-form-item>

            <el-form-item label="按钮类型" v-if="propJson.splitButton === 'button' || propJson.splitButton === 'span'">
                <el-select v-model="propJson.buttonType" placeholder="按钮类型" style="width: 100%">
                    <el-option label="默认" value="default" />
                    <el-option label="普通" value="primary" />
                    <el-option label="成功" value="success" />
                    <el-option label="日志级别" value="info" />
                    <el-option label="警告" value="warning" />
                    <el-option label="危险" value="danger" />
                </el-select>
            </el-form-item>

            <el-form-item label="按钮大小" v-if="propJson.splitButton === 'button' || propJson.splitButton === 'span'">
                <el-select v-model="propJson.buttonSize" placeholder="按钮大小" style="width: 100%">
                    <el-option label="小号" value="small" />
                    <el-option label="默认" value="default" />
                    <el-option label="大号" value="large" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否禁用" v-if="propJson.splitButton === 'button' || propJson.splitButton === 'span'">
                <el-radio-group v-model="propJson.disabled">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="菜单弹出位置" >
                <el-select v-model="propJson.placement" placeholder="菜单弹出位置" style="width: 100%">
                    <el-option label="上方" value="top" />
                    <el-option label="上方起始处" value="top-start" />
                    <el-option label="上方结束处" value="top-end" />
                    <el-option label="下方" value="bottom" />
                    <el-option label="下方起始处" value="bottom-start" />
                    <el-option label="下方结束处" value="bottom-end" />
                </el-select>
            </el-form-item>

            <el-form-item label="下拉触发行为" >
                <el-select v-model="propJson.trigger" placeholder="下拉触发行为" style="width: 100%">
                    <el-option label="鼠标悬浮下拉" value="hover" />
                    <el-option label="鼠标点击下拉" value="click" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否点击选项后隐藏菜单">
                <el-radio-group v-model="propJson.hideOnClick">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider>菜单下拉选项默认值</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.defaultActionInfo ? propJson.defaultActionInfo : {}" :commonParam="commonParam" />

            <el-divider>菜单下拉选项值</el-divider>

            <el-form-item label="菜单下拉选项值字段表达式">
                <el-input v-model="propJson.dropDownJsonPath" style="width: 100%" placeholder="$." />
            </el-form-item>

            <CommonThirdServiceValue :actionInfo="propJson.actionInfo ? propJson.actionInfo : {}" :commonParam="commonParam" />

            <el-form-item label="是否添加菜单选中行为">
                <el-radio-group v-model="propJson.isAddChangeAction">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isAddChangeAction">菜单选中行为</el-divider>

            <el-form-item label="菜单选中行为入参值" v-if="propJson.isAddChangeAction">
                <el-input v-model="propJson.commandField" style="width: 100%" placeholder="菜单选中行为入参字段" />
            </el-form-item>

            <el-form-item label="菜单选中行为入参位置" v-if="propJson.isAddChangeAction">
                <el-input v-model="propJson.commandVariable" style="width: 100%" placeholder="菜单选中行为入参位置" />
            </el-form-item>

            <el-form-item label="是否重新加载页面" v-if="propJson.isAddChangeAction">
                <el-radio-group v-model="propJson.isReloadPage">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isAddChangeAction">
                <el-button type="primary" class="addCollapse" size="small" @click="addChangeAction()">添加菜单选中行为</el-button>
            </div>

            <div v-if="propJson.isAddChangeAction">
                <CommonThirdServiceAction :actionList="propJson.changeAction" :commonParam="commonParam" />
            </div>
        </el-form>
    </div>
</template>

<script name="MenuDropDownDrawer" setup lang="ts">
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue";
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue";
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addChangeAction() {
    if (!propJson.value.changeAction) {
        propJson.value.changeAction = []
    }
    let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    propJson.value.changeAction.push(variableInfo)
}
</script>

<style scoped lang="less">

</style>